<div layout:decorator="shared/layout" xmlns:layout="http://www.w3.org/1999/xhtml">
    <el-main>
        <div layout:fragment="content" style="margin:10px 0px 30px 10px;">
            <template>
                <div class="formSearch" style="padding:10px;border: 1px solid #ebebeb;border-radius: 0px;">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="邮箱: ">
                            <el-input v-model="userSearch.email" prefix-icon="el-icon-search" placeholder="邮箱｜支持模糊匹配"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名: ">
                            <el-input v-model="userSearch.userName" prefix-icon="el-icon-search" placeholder="名字｜支持模糊匹配"></el-input>
                        </el-form-item>
                        <el-form-item label="状态: ">
                            <el-select v-model="userSearch.userStatus" prefix-icon="el-icon-search" placeholder="用户状态">
                                <el-option label="审核中" value="5"></el-option>
                                <el-option label="正常" value="10"></el-option>
                                <el-option label="冻结" value="15"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onUserSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="padding:5px;">
                    <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
                </div>
            </template>
            <div>
                <template>
                    <el-table :data="tableData" border style="width:100%">
                        <el-table-column prop="id" width="40"><el-checkbox></el-checkbox></el-table-column>
                        <el-table-column prop="userStatusStr" label="状态" width="180"></el-table-column>
                        <el-table-column prop="birthdayTimeStr" label="日期" width="180"></el-table-column>
                        <el-table-column prop="userName" label="名字" width="180"></el-table-column>
                        <el-table-column prop="email" label="邮箱地址"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="headerClick(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template>
                    <div class="block" style="padding-top: 10px;">
                        <el-pagination
                                @current-change="currentChange"
                                :current-page="pageNumber"
                                @size-change="handleSizeChange"
                                :page-sizes="[100, 200, 300, 400]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="tableData.length">
                        </el-pagination>
                    </div>
                </template>
            </div>
            <div>
                <el-dialog title="用户信息" :visible.sync="dialogFormVisible" :append-to-body="true">
                    <el-form :model="userAdd">
                        <el-form-item label="用户名称: " :label-width="formLabelWidth">
                            <el-input v-model="userAdd.userName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱地址: " :label-width="formLabelWidth">
                            <el-input v-model="userAdd.email"></el-input>
                        </el-form-item>
                        <el-form-item label="生日: " :label-width="formLabelWidth">
                            <el-date-picker v-model="userAdd.birthdayTimeStr" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addUserSubmit">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </el-main>

</div>

<script>
var time = '[(${time})]';
console.log(time);
var API = {
    getAllUserList : "/user/getAllUserList",
    addUser : "/user/addUser",
};
var vue = new Vue({
    el: '#app',
    data : {
        tableData: [],
        pageNumber : 1,
        pageSize : 10,
        userAdd : {
            userName : "",
            email : "",
            birthdayTimeStr : new Date(time),
        },
        userSearch : {
            email : "",
            userName : ""
        },
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        },
        dialogFormVisible : false,
        formLabelWidth : "120px",
    },

    mounted : function() {
        this.getAllUserList();
    },

    methods : {
        onUserSubmit : function () {
            this.getAllUserList();
        },
        headerClick : function (row) {
            console.log(row.date)
        },

        getAllUserList : function () {
            var that = this;
            var data = this.userSearch;
            data.pageNumber = this.pageNumber;
            data.pageSize = this.pageSize;

            $.ajax({
                type: "POST",
                url: API.getAllUserList,
                data: data,
                dataType: "JSON",
                success: function(data){
                    if (data.success) {
                        that.tableData = data.body;
                    }
                },
                error : function () {

                }
            })
        },
        // 改变当前页
        currentChange : function(pageNumber) {
             this.pageNumber = pageNumber;
        },
        // 改变数量
        handleSizeChange: function(pageSize) {
             this.pageSize = pageSize;
        },
        addUserSubmit : function () {
            var that = this;
            var data = this.userAdd;

            $.ajax({
                type: "POST",
                url: API.addUser,
                data: data,
                dataType: "JSON",
                success: function(data) {
                    if (data.success) {
                        that.$message({ message: '用户添加成功', type: 'success'});

                        that.dialogFormVisible = false;

                        that.getAllUserList();
                    } else {
                        that.$message.error(data.message);
                    }
                },
                error : function () {
                    that.$message.error('保存失败，未知错误');
                }
            })
        }
    },
});
</script>